<template>
	<view>
		<!-- <u-navbar :is-back="false" :is-fixed="true" title="订单"></u-navbar> -->
		<view class="fixed-top bg-white">
			<view class="px-3 tab-items" v-for="(item,index) in tabList" :id="'tab'+index" @click="changeTabList(index)"
				:key="index">
				<view class="font-md" :class="tabIndexList === index ? 'text-8ED0F2 font-weight-bold font-lg':''">
					{{item.name}}
				</view>
			</view>
			<view v-if="tabIndexList === 0 || tabIndexList === 1">
				<view class="px-2 mt-2 pb-2 dfes">
					<!-- <i class="iconfont icon-jia text-8ED0F2 mr-2"
						@click="open(tabIndexList === 0 ? 'tabbar/order/addOrder' : 'tabbar/order/modifications')"></i> -->
						<u-button  class="mr-2 text-white bg-8ED0F2"  size="mini"
										shape="circle" @click="open(tabIndexList === 0 ? 'tabbar/order/addOrder' : 'tabbar/order/modifications')">新增</u-button>
					<u-search placeholder="请输入关键字 " height="60" border-color="#8ED0F2" search-icon-color="#8ED0F2"
						bg-color="#fff" v-model="keyword" @change="search" :action-style="actionStyle"></u-search>
				</view>
				<scroll-view scroll-x class="tab-scroll" :scroll-into-view="scrollinto" :scroll-with-animation="true"
					:show-scrollbar="false">
					<view class="px-3 tab-item" v-for="(item,index) in (tabIndexList === 0 ? tabBar : tabBars)"
						:id="'tab'+index"
						@click="changeTab(tabIndexList === 0 ? index : index, item.orderState, item.orderType)"
						:key="index">
						<view class="font-16 dfex"
							:class="(tabIndexList === 0 ? tabIndex : tabIndexs) === index ? 'text-8ED0F2 active':''">
							{{item.name}}
						</view>
					</view>
				</scroll-view>
			</view>
			<u-gap height="20" bg-color="#f7f7f7"></u-gap>
		</view>

		<view class="p-2" style="margin-top: 140px;">
			<swiper :current="tabIndexList === 0 ? tabIndex : tabIndexs"
				@change="onChangeTab(tabIndexList === 0 ? $event : $event, tabIndexList === 0 ? tabBar : tabBars)"
				style="height: 100vh;">
				<swiper-item v-for="(_,inx) in (tabIndexList === 0 ? tabBar : tabBars)" :key="inx">
					<scroll-view scroll-y style="height: calc(100vh - 50px);" :show-scrollbar="false"
						@scrolltolower="loadMore" @scrolltoupper="refresh">
						<view v-for="(item, index) in (tabIndexList === 0 ? newlist : agriculture)" :key="index"
							class="pb-2 mt-2 content-item">
							<view class="show-dd pl-2 bg-white pt-2">
								<view class="dfes">
									<view class="font-14 text-333333 font-weight-bold">
										{{item.productServeName || item.title}}
									</view>
									<view class="position-absolute  font-14" style="right: 10px;">
										<view v-if="tabIndexList === 0 ">
											<view class="text-999999" v-if="item.orderType !== true">
												线下订单
											</view>
											<view v-else class="text-FFC251">
												{{ item.orderState_dictText }}
											</view>
										</view>
										<view v-if="tabIndexList === 1 ">
											<view class="text-999999" v-if="item.orderType !== true">
												线下订单
											</view>
											<view v-else class="text-FFC251">
												{{ item.orderState_dictText }}
											</view>
										</view>

									</view>

								</view>
								<view class="lineHight mt-2">
									<view>订单编号：{{item.orderNumber}}</view>
									<view>
										{{ tabIndexList === 0 ? '上游服务商' : '下游服务商' }}：{{ tabIndexList === 0 ? item.serviceName : item.downEnterpriseName }}
									</view>
									<view>订单价格：{{item.servicePrice || item.price}} 元</view>
								</view>

								<view class="lineHight-3 text-right">
									<u-button v-if="tabIndexList === 0" class="mr-1 borRound text-78AB06" :plain="false"
										:hair-line="false" size="mini" shape="circle"
										@click="detail(item.id)">查看订单</u-button>

									<u-button v-if="tabIndexList === 1" class="mr-1 borRound text-78AB06" :plain="false"
										:hair-line="false" size="mini" shape="circle"
										@click="detail(item.id)">查看订单</u-button>

									<u-button
										v-if="tabIndexList === 0 && item.orderState_dictText === '对接中' && item.orderState_dictText !== '已取消' && item.orderState_dictText !== '已完成' && item.orderState_dictText !== '待评价' && item.orderType !== false "
										class="mr-1 borRound text-78AB06" :plain="false" :hair-line="false" size="mini"
										shape="circle" @click="orderCancel(item.id)">取消订单</u-button>
									<u-button
										v-if="tabIndexList === 1 && item.orderState_dictText === '对接中' && item.orderState_dictText !== '已取消' && item.orderState_dictText !== '已完成' && item.orderState_dictText !== '待评价' && item.orderType !== false "
										class="mr-1 borRound text-78AB06" :plain="false" :hair-line="false" size="mini"
										shape="circle" @click="hodeOrderCancel(item.id)">取消订单</u-button>

									<u-button
										v-if="tabIndexList === 0 && item.orderState_dictText === '对接中' && item.orderState_dictText !== '已完成' && item.orderState_dictText !== '已取消' && item.orderState_dictText !== '待评价' && item.orderType !== false "
										@click="orderComplete(item.id)" class="mr-1 borRound text-78AB06" :plain="false"
										:hair-line="false" size="mini" shape="circle">订单完成</u-button>
									<u-button
										v-if="tabIndexList === 1 && item.orderState_dictText === '对接中' && item.orderState_dictText !== '已完成' && item.orderState_dictText !== '已取消' && item.orderState_dictText !== '待评价' && item.orderType !== false "
										@click="hodeOrderComplete(item.id)" class="mr-1 borRound text-78AB06"
										:plain="false" :hair-line="false" size="mini" shape="circle">订单完成</u-button>

									<u-button
										v-if="tabIndexList === 0 && item.orderState_dictText === '待评价'"
										class="mr-1 borRound text-78AB06" :plain="false" :hair-line="false" size="mini"
										shape="circle" @click="comment(item.id,item.orderEvaluation)">去评价</u-button>

									<u-button
										v-if="tabIndexList === 1 && item.orderState_dictText === '待评价'"
										class="mr-1 borRound text-78AB06" :plain="false" :hair-line="false" size="mini"
										shape="circle" @click="hodeComment(item.id,item.orderEvaluation)">去评价</u-button>
									<u-button
										v-if="tabIndexList === 0 && item.orderState_dictText !== '待评价' && item.orderState_dictText !== '已取消' && item.orderState_dictText !== '已完成'  && item.orderType === false"
										class="mr-1 borRound text-78AB06" :plain="false" :hair-line="false" size="mini"
										shape="circle" @click="addOrderDile(item.id)">修改订单</u-button>
									<u-button
										v-if="tabIndexList === 1 && item.orderState_dictText !== '待评价' && item.orderState_dictText !== '已取消' && item.orderState_dictText !== '已完成'  && item.orderType === false"
										class="mr-1 borRound text-78AB06" :plain="false" :hair-line="false" size="mini"
										shape="circle" @click="hodeAddOrderDile(item.id)">修改订单</u-button>

									<u-button
										v-if="tabIndexList === 0 && item.orderState_dictText !== '已完成' && item.orderState_dictText !== '待评价' && item.orderState_dictText !== '已取消' && item.orderType === false "
										@click="hodeVoids(item.id)" class="mr-1 borRound text-78AB06" :plain="false"
										:hair-line="false" size="mini" shape="circle">订单作废</u-button>

									<u-button
										v-if="tabIndexList === 1 && item.orderState_dictText !== '对接中' && item.orderState_dictText !== '已完成' && item.orderState_dictText !== '待评价' && item.orderState_dictText !== '已取消'"
										@click="hodeOrderDele(item.id)" class="mr-1 borRound text-78AB06" :plain="false"
										:hair-line="false" size="mini" shape="circle">订单删除</u-button>
								</view>
							</view>
						</view>
						<view v-if="!hasMore && (newlist.length > 0 || agriculture.length > 0)"
							class="text-center mt-3 mb-3">
							<view class="text-muted">没有更多数据了</view>
						</view>
						<view v-else-if="(newlist.length === 0 && agriculture.length === 0)"
							class="text-center mt-3 mb-3">
							<view class="iconfont text-999999 icon-zanwushuju font-48 pb-1"></view>
							<view class="text-999999 font-15">暂无数据</view>
						</view>
						<view v-else class="text-center mt-3 mb-3">
							<view class="btn btn-primary">加载更多</view>
						</view>
					</scroll-view>
				</swiper-item>
			</swiper>
		</view>
	</view>
</template>

<script>
	import $H from '@/common/free-lib/request.js';
	export default {
		data() {
			return {
				tabList: [{
						"id": 1,
						"name": "上游市场",
					},
					{
						"id": 2,
						"name": "下游市场",
					},
				],
				tabBar: [{
						"id": 1,
						"name": "全部",
						"orderState": null,
						"orderType": ""
					},
					{
						"id": 2,
						"name": "对接中",
						"orderState": "docking",
						"orderType": true
					},
					{
						"id": 3,
						"name": "待评价",
						"orderState": "evaluate",
						"orderType": true
					},
					{
						"id": 4,
						"name": "已完成",
						"orderState": "complete",
						"orderType": true
					},
					{
						"id": 5,
						"name": "线下订单",
						"orderState": "",
						"orderType": false
					},
				],
				tabBars: [{
						"id": 1,
						"name": "全部",
						"orderState": null,
						"orderType": ""
					},
					{
						"id": 2,
						"name": "对接中",
						"orderState": "docking",
						"orderType": true
					},
					{
						"id": 3,
						"name": "待评价",
						"orderState": "evaluate",
						"orderType": true
					},
					{
						"id": 4,
						"name": "已完成",
						"orderState": "complete",
						"orderType": true
					},
					{
						"id": 5,
						"name": "线下订单",
						"orderState": "",
						"orderType": false
					},
				],
				scrollinto: "",
				tabIndex: 0,
				tabIndexs: 0,
				tabIndexList: 0,
				keyword: '',
				actionStyle: {
					color: '#8ED0F2'
				},
				newlist: [],
				agriculture: [],
				orderState: '',
				orderType: '',
				form: {
					pageNo: 1,
					pageSize: 10,
					total: 0 // 总页数
				},
				hasMore: true, // 是否还有更多数据
			};
		},
		onShow() {
			this.getList();
			this.newlist = [];
			this.agriculture = [];
		},
		// onLoad() {
		// 	// this.getList();
		// },

		methods: {
			setDefaultPageConfig() {
				this.form.pageNo = 1
				this.form.pageSize = 10
				this.form.total = 0
			},
			search() {
				if (this.keyword.trim() === '') {
					this.hasMore = true;
					this.newlist = []; // 清空列表数据
					this.setDefaultPageConfig();
					this.getList();
					return;
				}
				this.newlist = [];
				this.setDefaultPageConfig();
				this.getList();
			},
			getList() {
				uni.showLoading({
					title: '加载中'
				});
				const api = this.tabIndexList === 0 ? '/upper/upperMarketOrder/agriculture/list' :
					'/down/downServiceOrder/agriculture/list';
				const requestData = this.tabIndexList === 0 ? {
					productServeName: this.keyword.trim()
				} : {
					title: this.keyword.trim()
				};
				const data = {
					orderState: this.orderState,
					orderType: this.orderType,
					...this.form,
					...requestData
				};
				$H.get(api, data).then(res => {
					const list = this.tabIndexList === 0 ? this.newlist : this.agriculture;
					if (!this.orderState && (this.orderState === "complete" || this.orderState === "evaluate" ||
							this.orderState === "docking")) {
						this.form.total = res.result.total;
						this.hasMore = list.length < this.form.total;
					} else {
						list.push(...res.result.records);
						this.form.total = res.result.total;
						this.hasMore = list.length < this.form.total;
					}
					this.page++;
					uni.hideLoading();
				}).catch(error => {
					console.log(error)
				});
			},
			changeTab(index, orderState, orderType) {
				if (this.tabIndexList === 0) {
					if (this.tabIndex === index) return;
					this.tabIndex = index;
				} else {
					if (this.tabIndexs === index) return;
					this.tabIndexs = index;
				}
				this.scrollinto = "tabBar" + index;
				this.orderState = orderState;
				this.orderType = orderType;
				this.newlist = [];
				this.agriculture = [];
				this.setDefaultPageConfig();
				this.getList();
			},
			onChangeTab(event, tabData) {
				const detail = event.detail;
				const index = detail.current;
				const orderState = tabData[index].orderState;
				const orderType = tabData[index].orderType;
				this.newlist = [];
				this.agriculture = [];
				this.changeTab(index, orderState, orderType);
				// this.getList();
			
			},
			changeTabList(index) {
				if (this.tabIndexList === index) return;
				this.tabIndexList = index;
				this.getList();
				this.newlist = [];
				this.agriculture = [];
			},

			// 加载更多
			loadMore() {

				if (this.form.pageNo * this.form.pageSize >= this.form.total) {
					this.hasMore = false;
					return;
				}
				this.form.pageNo++;
				// 请求数据
				this.getList();
				this.newlist = [];
				this.agriculture = [];
			},
			// 下拉刷新
			refresh() {
				// 重置页码为 1
				this.form.pageNo = 1;
				// 清空数据列表
				this.newlist = [];
				this.agriculture = [];
				// 设置标记为有更多数据
				this.hasMore = true;
				// 重新请求数据
				this.getList();
				// 结束下拉刷新动画
				uni.$emit('stopPullDownRefresh');
			},

			// 上游商城
			detail(id) {
				const url = this.tabIndexList === 0 ? '/pages/tabbar/order/downstreamOrders?id=' :
					'/pages/tabbar/order/upstreamOrders?id=';
				uni.navigateTo({
					url: `${url}${id}`
				})
			},
			cancel(id, api) {
				uni.showModal({
					title: '取消成功',
					content: '是否确认取消成功？',
					success: (res) => {
						if (res.confirm) {
							$H.post(api, {
								id: id
							}).then(res => {
								if (res.code === 200) {
									uni.showToast({
										title: res.message,
										icon: 'none',
									})
									this.getList();
									this.newlist = [];
									this.agriculture = [];
								} else {
									uni.showToast({
										title: '取消异常',
										icon: 'none',
									})
								}
							})
						} else if (res.cancel) {}
					}
				});
			},
			complete(id, api) {
				uni.showModal({
					title: '完成订单',
					content: '是否确认完成订单？',
					success: (res) => {
						if (res.confirm) {
							$H.post(api, {
								id: id
							}).then(res => {
								if (res.code === 200) {
									uni.showToast({
										title: res.message,
										icon: 'none',
									})
									this.getList();
									this.newlist = [];
									this.agriculture = [];
								} else {
									uni.showToast({
										title: '完成订单异常',
										icon: 'none',
									})
								}
							})
						} else if (res.cancel) {}
					}
				});
			},
			comment(id, evaluation) {
				uni.navigateTo({
					url: `/pages/tabbar/order/comment?id=${id}&evaluation=${evaluation}`
				})
			},
			addOrder(id) {
				uni.navigateTo({
					url: `/pages/tabbar/order/addOrderDile?id=${id}`
				})
			},
			hodeVoids(id) {
				uni.showModal({
					title: '订单作废',
					content: '是否确认订单作废？',
					success: (res) => {
						if (res.confirm) {
							$H.post(`/upper/upperMarketOrder/upper/voids?id=${id}`).then(res => {
								if (res.code === 200) {
									uni.showToast({
										title: res.message,
										icon: 'none',
									})
									this.getList();
									this.newlist = [];
									this.agriculture = [];
								} else {
									uni.showToast({
										title: '订单作废异常',
										icon: 'none',
									})
								}
							})
						} else if (res.cancel) {}
					}
				});
			},
			hodeOrderDele(id) {
				uni.showModal({
					title: '删除成功',
					content: '是否确认删除成功？',
					success: (res) => {
						if (res.confirm) {
							$H.del(`/down/downServiceOrder/agriculture/orderDelete?id=${id}`).then(res => {
								if (res.code === 200) {
									uni.showToast({
										title: res.message,
										icon: 'none',
									})
									this.getList();
									this.newlist = [];
									this.agriculture = [];
								} else {
									uni.showToast({
										title: '删除异常',
										icon: 'none',
									})
								}
							})
						} else if (res.cancel) {}
					}
				});
			},
			open(path) {
				uni.navigateTo({
					url: '/pages/' + path
				})
			},
			// 上游市场
			// 详情页
			// downstreamOrders(id) {
			// 	uni.navigateTo({
			// 		url: `/pages/tabbar/order/downstreamOrders?id=${id}`
			// 	})
			// },
			// 取消订单
			orderCancel(id) {
				uni.showModal({
					title: '取消成功',
					content: '是否确认取消成功？',
					success: (res) => {
						if (res.confirm) {
							$H.post(`/upper/upperMarketOrder/agriculture/orderCancel?id=${id}`, {}, {}).then(
								res => {
									if (res.code === 200) {
										uni.showToast({
											title: res.message,
											icon: 'none',
										})
										this.getList();
										this.newlist = [];
										this.agriculture = [];
									} else {
										uni.showToast({
											title: '取消异常',
											icon: 'none',
										})
									}
								})
						} else if (res.cancel) {
							// 用户点击了取消按钮，不执行任何操作
						}
					}
				});

			},
			// 完成订单 
			orderComplete(id) {
				uni.showModal({
					title: '完成订单',
					content: '是否确认完成订单？',
					success: (res) => {
						if (res.confirm) {
							$H.post(`/upper/upperMarketOrder/agriculture/orderComplete?id=${id}`, {}, {}).then(
								res => {
									if (res.code === 200) {
										uni.showToast({
											title: res.message,
											icon: 'none',
										})
										this.getList();
										this.newlist = [];
										this.agriculture = [];
									} else {
										uni.showToast({
											title: '完成订单异常',
											icon: 'none',
										})
									}
								})
						} else if (res.cancel) {
							// 用户点击了取消按钮，不执行任何操作
						}
					}
				});

			},
			// 去评论
			comment(id, orderEvaluation) {
				uni.navigateTo({
					url: `/pages/tabbar/order/comment?id=${id}&evaluation=${orderEvaluation}`
				})
			},
			// 编辑
			addOrderDile(id) {
				uni.navigateTo({
					url: `/pages/tabbar/order/addOrderDile?id=${id}`
				})
			},

			// 下游市场
			// 取消订单
			hodeOrderCancel(id) {
				uni.showModal({
					title: '取消成功',
					content: '是否确认取消成功？',
					success: (res) => {
						if (res.confirm) {
							$H.post(`/down/downServiceOrder/agriculture/orderCancel?id=${id}`, {}, {}).then(
								res => {
									if (res.code === 200) {
										uni.showToast({
											title: res.message,
											icon: 'none',
										})
										this.NewList();
										this.newlist = [];
										this.agriculture = [];
									} else {
										uni.showToast({
											title: '取消异常',
											icon: 'none',
										})
									}
								})
						} else if (res.cancel) {
							// 用户点击了取消按钮，不执行任何操作
						}
					}
				});
			},
			// 订单完成
			hodeOrderComplete(id) {
				uni.showModal({
					title: '完成订单',
					content: '是否确认完成订单？',
					success: (res) => {
						if (res.confirm) {
							$H.post(`/down/downServiceOrder/agriculture/orderComplete?id=${id}`, {}, {}).then(
								res => {
									if (res.code === 200) {
										uni.showToast({
											title: res.message,
											icon: 'none',
										})
										_this.NewList();
										_this.newlist = [];
										_this.agriculture = [];
									} else {
										uni.showToast({
											title: '完成订单异常',
											icon: 'none',
										})
									}
								})
						} else if (res.cancel) {
							// 用户点击了取消按钮，不执行任何操作
						}
					}
				});
			},
			// 评论订单
			hodeComment(id, orderEvaluation) {
				uni.navigateTo({
					url: `/pages/tabbar/order/commentEvaluate?id=${id}&evaluation=${orderEvaluation}`
				})
			},
			// 编辑
			hodeAddOrderDile(id) {
				uni.navigateTo({
					url: `/pages/tabbar/order/modifyOrder?id=${id}`
				})
			},
		}
	};
</script>

<style lang="scss" scoped>
	.tab-scroll {
		width: 100vw;
	}

	.tab-item {
		margin-left: 2px;
		display: inline-block;
		text-align: center;
		padding: 0 12px;
		line-height: 40px;

	}

	.tab-items {
		width: 50%;
		display: inline-block;
		text-align: center;
		padding: 0 10px;
		line-height: 40px;
	}

	.active {
		border-bottom: 2px solid #8ED0F2;
	}
</style>